<template>
  <view class="popBox">
	<view class="title">{{ activeDistrictArea }}</view>
	<view class="num">可租{{ emptyNum }}/{{ totalNum }}套</view>
    <view class="roomList">
     <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
        <view
          class="list row"
          v-for="(item, index) in roomList"
          :key="index"
          @tap="handleRoomDetail(item)"
        >
          <view class="pic">
            <image
              class="img"
              v-if="item.picUrl"
              :src="item.picUrl"
              mode=""
            ></image>
            <image
              class="img"
              v-else
              :src="$imgUrl + '/index/room.png'"
              mode=""
            ></image>
          </view>
          <view class="mess">
            <view class="name line1">{{ item.roomFullName }}</view>
            <view class="area line1"
              >{{ item.roomHouseTypeName }} | {{ item.space }}㎡</view
            >
            <view class="addr line1"
              ><text class="icon-addr"></text>{{ item.address }}</view
            >
            <view class="price"
              ><text class="yellow">{{ item.monthRental || 0 }}</text
              >/月起</view
            >
          </view>
        </view>
      </mescroll-body>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { getapartmentareainfo } from '@/common/API/room'
// 工具
import { ref, getCurrentInstance } from 'vue'
import { onPageScroll, onReachBottom, onLoad } from '@dcloudio/uni-app'
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js'
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom)
// const instance = getCurrentInstance()
// const _this = instance.appContext.config.globalProperties

const activeDistrictArea = ref('')
const emptyNum = ref(0) // 空房数量
const totalNum = ref(0) // 房源总数量
const roomList = ref([]) // 某小区的房源列表
const curApartmentAreaId = ref()

const handleRoomDetail = (val) => {
  uni.navigateTo({
    url: '/pages/searchRoom/disperseHouseDetail?roomHouseId=' + val.roomHouseId,
  })
}

const upCallback = async (mescroll) => {
  if (!curApartmentAreaId.value) return false
  let data = {
    pageNo: mescroll.num,
    pageSize: 10,
    roomAreaId: curApartmentAreaId.value,
  }
  getapartmentareainfo(data)
    .then((res) => {
      let curPageData = res.page.list
      let curPageLen = curPageData.length
      if (mescroll.num == 1) roomList.value = []
      roomList.value = roomList.value.concat(curPageData)
      emptyNum.value = res.emptyNum
      totalNum.value = res.totalNum
      mescroll.endSuccess(curPageLen)
    })
    .catch((err) => {
      console.log(err)
    })
}

const resetScroll = () => {
  roomList.value = []
  downCallback()
}

onLoad((options) => {
	curApartmentAreaId.value = options.apartmentAreaId
})
</script>
<style lang="scss" scoped>
.popBox {
  .title {
    padding: 0 40rpx;
    font-size: 36rpx;
    color: #000;
    line-height: 44rpx;
  }
  .num {
    padding: 0 40rpx;
    line-height: 34rpx;
    margin: 8rpx 0 0;
  }
  .roomList {
    border-top: 2rpx solid #f5f5f5;
    padding: 0 40rpx;
	// overflow: hidden;
    // max-height: calc(100% - 70rpx);
    // overflow-y: scroll;
    .list {
      padding: 34rpx 0 20rpx;

      .pic {
        width: 242rpx;
        height: 184rpx;
        border-radius: 8rpx;
        overflow: hidden;
        margin-right: 28rpx;
      }

      .mess {
        max-width: 400rpx;

        .name {
          font-size: 30rpx;
          color: #000;
          line-height: 36rpx;
          font-weight: bold;
        }

        .area {
          color: #666;
          font-size: 24rpx;
          margin: 10rpx 0 6rpx;
        }

        .addr {
          font-size: 24rpx;
          line-height: 30rpx;
          margin: 0 0 12rpx;
          color: #999;

          .icon-addr {
            display: inline-block;
            width: 28rpx;
            height: 28rpx;
            background: url('#{$imgUrl}/index/room-addr.png') no-repeat;
            background-size: 100% 100%;
            vertical-align: middle;
            margin: -4rpx 8rpx 0 0;
          }
        }

        .price {
          margin: 14rpx 0 0;
          color: #4d4d4d;
          font-size: 20rpx;
          line-height: 40rpx;

          .yellow {
            font-size: 36rpx;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>
